<div class="main-container">
  <section class="text-center">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <h1>
            Query.
            <span class="color--primary">Explore.</span>
            Share.
          </h1>
          <h3>
            Hue is an open source SQL Assistant for Databases & Data Warehouses
          </h3>
          <a class="btn btn--primary btn--lg type--uppercase" href="http://demo.gethue.com" target="_blank">
            <span class="btn__text">
              Try Hue Now
            </span>
          </a>
          <!--
            <a class="btn btn--primary btn--lg type--uppercase" href="#">
              <span class="btn__text">
                Get Started FREE
              </span>
            </a>
            <span class="block type--fine-print">
              Or try a FREE
              <a href="http://demo.gethue.com" target="_blank"
                >product demo</a
              >
            </span>
            -->
        </div>
      </div>
      <!--end of row-->
    </div>
    <!--end of container-->
  </section>
  <section class="text-center">
    <div class="container">
      <div class="row">
        <div class="col-md-12 col-lg-9">
          <div class="bg--dark box-shadow-wide">
            <img alt="Image" src="https://cdn.gethue.com/uploads/2019/08/hue_4.5.png" />
          </div>
        </div>
      </div>
      <!--end of row-->
    </div>
    <!--end of container-->
  </section>
  <section class="border--bottom space--xxs ">
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <div class="modal-instance">
            <a class="btn type--uppercase modal-trigger" onclick="window.initScratchpad()" href="#">
              <span class="btn__text">
                &#9654; Open Sql Scratchpad
              </span>
            </a>
            <br />
            <br />
            <br />
            <div class="modal-container">
              <div class="modal-content bg-dark scratchpad-modal" data-width="60%" data-height="60%" style="display: flex; flex-direction: column;">
                <div style="flex: 0 1 100%; position: relative;" id="scratchpadModalContainer">
                  <div style="padding:10px; color: white;">Loading...</div>
                </div>
                <div style="flex: 0 0 content">
                  <a href="{{ .Site.Params.docsHost }}/developer/components/scratchpad/">Learn More »</a>
                </div>

              </div>
              <!--end of modal-content-->
            </div>
            <!--end of modal-container-->
          </div>
          <!--end of modal instance-->
          <span class="block--xs"></span>
        </div>
      </div>
      <!--end of row-->
    </div>
    <!--end of container-->
  </section>
  <section class="switchable feature-large">
    <div class="container">
      <div class="row justify-content-around">
        <div class="col-md-6">
          <img alt="Image" class="border--round box-shadow-wide"
            src="https://cdn.gethue.com/uploads/2017/07/hue_4_assistant_2.gif" />
        </div>
        <div class="col-md-6 col-lg-5">
          <div class="switchable__text">
            <h2>Write SQL like a pro</h2>
            <p class="lead">
              Hue brings the best
              <a href="{{ .Site.Params.docsHost }}/user/querying/">Querying Experience</a>
              with the most intelligent Autocompletes and Query Editor components.
            </p>
            <a href="{{ .Site.Params.docsHost }}/user/concept">Learn More »</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="switchable feature-large switchable--switch bg--secondary">
    <div class="container">
      <div class="row justify-content-around">
        <div class="col-md-6">
          <img alt="Image" class="border--round box-shadow-wide" src="img/databases.svg" />
        </div>
        <div class="col-md-6 col-lg-5">
          <div class="switchable__text">
            <h2>Connect to all the databases</h2>
            <p class="lead">
              Pick one of the multiple interpreters for
              <a href="{{ .Site.Params.docsHost }}/administrator/configuration/connectors/#apache-hive">Apache Hive</a>,
              <a href="{{ .Site.Params.docsHost }}/administrator/configuration/connectors/#apache-impala">
                Apache Impala
              </a>,
              <a href="{{ .Site.Params.docsHost }}/administrator/configuration/connectors/#presto">Presto</a>
              <a href="/blog/tutorial-query-live-data-stream-with-flink-sql/">Apache Flink SQL</a>,
              <a href="/blog/querying-spark-sql-with-spark-thrift-server-and-hue-editor/">SparkSQL</a>,
              <a href="/sql-querying-apache-hbase-with-apache-phoenix/">Apache Phoenix</a>,
              <a href="/blog/tutorial-query-live-data-stream-with-kafka-sql/">ksqlDB</a>,
              <a href="{{ .Site.Params.docsHost }}/administrator/configuration/connectors/#elastic-search">Elastic
                Search</a>,
              <a href="/quick-task-how-to-query-apache-druid-analytic-database/">Apache Druid</a>, PostgreSQL, Redshift,
              BigQuery...
            </p>
            <a href="{{ .Site.Params.docsHost }}/administrator/configuration/connectors/">Learn More »</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="switchable feature-large">
    <div class="container">
      <div class="row justify-content-around">
        <div class="col-md-6">
          <img alt="Image" class="border--round box-shadow-wide"
            src="https://cdn.gethue.com/uploads/2018/04/blog_top_search_.png" />
        </div>
        <div class="col-md-6 col-lg-5">
          <div class="switchable__text">
            <h2>Find and connect your data</h2>
            <p class="lead">
              The tables and storage browsers leverage your existing Data Catalogs knowledge
              transparently. Help users find the correct data among thousands of databases and self
              document it.
            </p>
            <a href="{{ .Site.Params.docsHost }}/user/browsing/">Learn More »</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="switchable feature-large switchable--switch bg--secondary">
    <div class="container">
      <div class="row justify-content-around">
        <div class="col-md-6">
          <img alt="Image" class="border--round box-shadow-wide" src="img/hue_slack_integration.png" />
        </div>
        <div class="col-md-6 col-lg-5">
          <div class="switchable__text">
            <h2>Install the Slack App!</h2>
            <p class="lead">
              Assist users with their SQL queries and leverage rich preview for links, sharing from Editor etc. directly in Slack.
            </p>
            <form autocomplete="off" onsubmit="return check(event)">
              <input type="text" id="hostname" placeholder="Your Hue hostname (e.g. hue.gethue.com:8000)"
                required></input>
              <button type="submit" class="btn btn--primary btn--lg type--uppercase">Install</button>
            </form>
            <br /><a href="{{ .Site.Params.docsHost }}/user/concept/#slack">Learn More »</a>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>
<script type="text/javascript" src="https://unpkg.com/gethue/lib/components/SqlScratchpadWebComponent.js"></script>
<style>
    .sql-scratchpad {
        background: white;
        box-sizing: border-box;
    }
    .sql-scratchpad-editor,
    .ace-editor-component,
    .ace-editor {
        position: relative;
    }
    .modal-container .modal-content.scratchpad-modal {
        transform: none !important;
        margin-left: -30%;
        margin-top: -20%;
    }
    .sql-scratchpad-actions * {
        line-height: 18px;
        height: 22px;
        vertical-align: middle;
    }
    .sql-scratchpad-actions .limit-input {
        font-size: 12px;
        width: 60px;
        height: 22px !important;
    }
    .sql-scratchpad-result {
        overflow: auto;
    }

    .sql-scratchpad-result h1 {
        text-align: center;
        font-size: 14px;
    }

</style>
<script>
  window.initScratchpad = function () {
      customElements.whenDefined('sql-scratchpad').then(function () {
          const containerElement = document.getElementById('scratchpadModalContainer');
          containerElement.innerHTML = '<sql-scratchpad style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;" api-url="https://demo.gethue.com" username="demo" password="demo" dialect="mysql" />';
      });
  }

  function check(event) {
    event.preventDefault();

    const url = 'https://demo.gethue.com/api/slack/install/?hostname=' + document.getElementById('hostname').value;
    fetch(url)
      .then(response => response.json())
      .then(response => {
        window.location.replace(response['link']);
      });
  }
</script>
